import React, { Component , useState, useEffect } from 'react'
import * as echarts from 'echarts';
import dataList from '../../../compontens/data/flare.json'


export default class Tree extends Component {    
    initChart = () => {
        var chartDom = document.getElementById('TreeChart');
        this.myChart = echarts.init(chartDom);
        var option = {
            tooltip: {
              trigger: 'item',
              triggerOn: 'mousemove'
            },
            series: [
              {
                type: 'tree',
                data: [dataList],
                top: '18%',
                bottom: '14%',
                layout: 'radial',
                symbol: 'emptyCircle',
                symbolSize: 7,
                initialTreeDepth: 3,
                animationDurationUpdate: 750,
                emphasis: {
                  focus: 'descendant'
                }
              }
            ]
          }
        this.myChart.setOption(option);
        console.log('ter')
    }
    chartReseize = () => {
        this.myChart && this.myChart.resize()
    }
    componentDidMount() {
        this.initChart()
    }
    render() {
        return (
            <div className='w100 h100' id='TreeChart'></div>
        )
    }
}
